<script setup lang='ts'>
import { ref, reactive } from "vue"
import { storeToRefs } from "pinia"
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from "element-plus"
import { Search, Minus, Plus } from '@element-plus/icons-vue'
import { useEnumStore } from "@/store/enumeration"
import {  associateMemberCommandRescindOrderPost } from "@/api/tcl"
import useInstance from '@/hooks/useInstance';

const { templateType } = storeToRefs(useEnumStore())
defineOptions({
    name: 'addListAd'
})
const emit = defineEmits(['refresh'])
const { global } = useInstance();

const dialogBasic = ref({
    title: "解约",
    visible: false,
    width: 400,
    height: 400,
    showFooter: true,
    marginTop: "10vh",
})


const supplyFormRef = ref<FormInstance>()
const addSupply = reactive<any>({
    productCode: null, //产品编码
    orderNo: null, //订单号
    remark: null, // 备注 
})

const rules = reactive<FormRules>({



})


//显示弹框
const show = (type: string, row?: any) => {
    global.$resetForm(supplyFormRef.value, addSupply)
    addSupply.orderNo = row.orderNo
    addSupply.productCode = row.productCode
    
    dialogBasic.value.visible = true
}
const onClose = () => {

    addSupply.productCode = null
    addSupply.orderNo = null
    addSupply.remark = null
    resetForm()
    dialogBasic.value.visible = false
}
const resetForm = () => {
    supplyFormRef.value?.resetFields()
}
const onConfirm = async () => {
    await supplyFormRef.value?.validate(async isOk => {
        if (isOk) {
            try {
              
                const res = await associateMemberCommandRescindOrderPost(addSupply)
                if (res.code == 20000) {
                    ElMessage({
                        message: "解约成功",
                        type: "success"
                    })
                    emit('refresh')
                    onClose()
                }
            } catch (error) {
                ElMessage({
                    message:"解约失败 请重试！",
                    type: "warning"
                })
            }
        }
    })
}


defineExpose({
    show
})
</script>

<template>
    <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
        @on-close="onClose" @on-confirm="onConfirm">
        <template v-slot:content>
            <el-form ref="supplyFormRef" :model="addSupply" :rules="rules" label-width="100px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="解约备注">
                    <NormalInput v-model:model-value="addSupply.remark"></NormalInput>
                </el-form-item>
            </el-form>
        </template>
    </SysDialog>
</template>

<style lang='scss' scoped>
.demo-ruleForm {
    max-height: 480px;
    overflow: auto;
}
:deep(.el-input-number .el-input__inner) {
    text-align: left;
}
</style>
